<template>
  <div class="container">
    <div class="recent-news">
      <dl
        class="news-item"
        v-for="(item, index) in texts"
        :key="index"
        @click="toNewsDetail(item.id)"
      >
        <dt class="news-item-title">{{ item.title }}</dt>
        <dd class="news-item-date">{{ item.publishTime }}</dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      texts: (state) => state.home.texts,
    }),
  },
  methods: {
    ...mapActions({
      homeTexts: "home/homeTexts",
    }),
    toNewsDetail(id) {
      wx.navigateTo({
        url: `/pages/news-detail/index?id=${id}`,
      });
    },
  },
  mounted() {
    this.homeTexts();
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.recent-news {
  background: #fff;
}
.recent-news .news-item {
  padding: 20rpx 20rpx 0 20rpx;
  position: relative;
}
.recent-news .news-item .news-item-title {
  font-size: 28rpx;
  text-align: left;
}
.recent-news .news-item .news-item-date {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}
</style>